import { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { Save, FileDown, Trash2 } from 'lucide-react';

/**
 * Markdown 笔记应用
 * 支持实时预览和 localStorage 持久化
 */
export default function MarkdownNotes() {
  const [markdown, setMarkdown] = useState('');

  // 从 localStorage 加载数据
  useEffect(() => {
    const savedMarkdown = localStorage.getItem('feng-admin-markdown');
    if (savedMarkdown) {
      setMarkdown(savedMarkdown);
    } else {
      // 默认示例内容
      setMarkdown(`# 欢迎使用 Markdown 笔记

## 功能特性

- ✅ **实时预览**：左侧编辑，右侧实时显示
- ✅ **GFM 支持**：支持 GitHub Flavored Markdown
- ✅ **本地存储**：自动保存到浏览器
- ✅ **导出功能**：可下载为 .md 文件

## 示例语法

### 代码块

\`\`\`javascript
function hello() {
  console.log('Hello, Feng Admin!');
}
\`\`\`

### 表格

| 功能 | 状态 |
|------|------|
| 编辑 | ✅ |
| 预览 | ✅ |
| 保存 | ✅ |

### 任务列表

- [x] 创建笔记应用
- [x] 添加 Markdown 支持
- [ ] 添加更多功能

---

**开始编辑吧！** 👈
`);
    }
  }, []);

  // 保存到 localStorage
  const saveNote = () => {
    localStorage.setItem('feng-admin-markdown', markdown);
    alert('笔记已保存！');
  };

  // 下载为文件
  const downloadNote = () => {
    const blob = new Blob([markdown], { type: 'text/markdown' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `note-${new Date().toISOString().slice(0, 10)}.md`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  // 清空笔记
  const clearNote = () => {
    if (confirm('确定要清空笔记吗？此操作不可恢复。')) {
      setMarkdown('');
      localStorage.removeItem('feng-admin-markdown');
    }
  };

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Markdown 笔记</h1>
          <p className="text-muted-foreground">支持实时预览的 Markdown 编辑器</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" onClick={clearNote}>
            <Trash2 className="mr-2 h-4 w-4" />
            清空
          </Button>
          <Button variant="outline" onClick={downloadNote}>
            <FileDown className="mr-2 h-4 w-4" />
            导出
          </Button>
          <Button onClick={saveNote}>
            <Save className="mr-2 h-4 w-4" />
            保存
          </Button>
        </div>
      </div>

      {/* 编辑器和预览 */}
      <div className="grid gap-4 lg:grid-cols-2">
        {/* 编辑器 */}
        <Card className="h-[calc(100vh-16rem)]">
          <CardHeader>
            <CardTitle>编辑器</CardTitle>
          </CardHeader>
          <CardContent className="h-[calc(100%-5rem)]">
            <textarea
              value={markdown}
              onChange={(e) => setMarkdown(e.target.value)}
              className="h-full w-full resize-none rounded-md border bg-background p-4 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-ring"
              placeholder="在此输入 Markdown 内容..."
            />
          </CardContent>
        </Card>

        {/* 预览 */}
        <Card className="h-[calc(100vh-16rem)]">
          <CardHeader>
            <CardTitle>预览</CardTitle>
          </CardHeader>
          <CardContent className="h-[calc(100%-5rem)] overflow-y-auto">
            <div className="markdown-preview max-w-none p-4">
              <ReactMarkdown remarkPlugins={[remarkGfm]}>
                {markdown}
              </ReactMarkdown>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

